<html>
  <head>
    <style>
      body {
        margin: 0;
      }
      .line {
        fill: transparent;
        stroke: black;
        stroke-width: 2;
        width: 800px;
        height: 600px;
      }
    </style>
  </head>
  <body>
    <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <polyline id="xaxis" points="" class="line"/>
      <polyline id="yaxis" points="" class="line"/>
      <polyline id="polyline" points="" class="line"/>
    </svg>

    <script>
      let xaxis = document.getElementById('xaxis')
      let yaxis = document.getElementById('yaxis')
      xaxis.setAttribute('points', `${0},${window.innerHeight/2} ${window.innerWidth},${window.innerHeight/2}`)
      yaxis.setAttribute('points', `${window.innerWidth/2},${0} ${window.innerWidth/2},${window.innerHeight}`)

      let polyline = document.getElementById('polyline')

      let points = []

      let i = 90
      let timer = setInterval(() => {
        let x = Math.sin(i * Math.PI / 180)
        let y = Math.cos(i * Math.PI / 180)
        x = x * 100 + window.innerWidth / 2
        y = - y * 100 + window.innerHeight / 2
        points.push(`${x},${y} `)
        polyline.setAttribute('points', points)

        i += 1

        if ( i > 450 ) {
          clearInterval(timer)
        }
      }, 10)
    </script>
  </body>
</html>